*{
    box-sizing: border-box;
}
div{
    border: 1px solid #ffffff;
}
.Box {
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    border-color: #0AA1ED;
    transform: translate(-50%, -50%);
    /*perspective: 1000px;*/
}

.Box > div {
    position: Absolute;
    top: 35%;
    left: 35%;
    display: flex;
    height: 300px;
    width: 300px;
    flex-wrap: wrap;
    /*border: 1px solid #2f2f2f;*/
}

/*.Box>div:not(:first-child){*/
/*    visibility:hidden;*/
/*}*/
.Before {
    transform: translate(-25%, 25%);
}

.Before > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(0, 0, 255, .35);
}

.Behind {
    transform: translate(25%, -25%)
}

.Behind > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(0, 128, 0, .35);
}

.Top {
    transform-origin: left bottom;
    transform: translate(-25%, -75%) skewX(135deg) scaleY(.5);
}

.Top > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(255, 255, 0, .35);
}

.Bottom {
    transform-origin: left top;
    transform: translate(25%, 75%) skewX(135deg) scaleY(.5);
}

.Bottom > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(255, 250, 240, .35);
}

.Left {
    transform: translate(-50%) skewY(135deg) scaleX(.5);
}

.Left > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(255, 165, 0, 0.35);
}

.Right {
    transform: translate(50%) skewY(135deg) scaleX(.5);
}

.Right > div {
    flex: 1 0 auto;
    min-height: 33%;
    min-width: 33%;
    background-color: rgba(255, 0, 0, 0.35);
}